<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue2.js"></script>
</head>
<body>

<!--
    v-bind : 可以实现标签属性的动态操作  但是这种操作是一种单向数据流   data  ==> view
    v-model : 可以实现数据的双向数据绑定   data  <==> view  一般使用在表单组件中

-->
<div id="app">
  <h1>{{title}}</h1>
  <form action="javascript:;" method="post" v-model="user">
    <p><input type="text" name="username" placeholder="请输入用户名"  v-model:value="user.username" ></p>
    <p><input type="text" name="password" placeholder="请输入密码"    v-model="user.username"></p>
    <p>
      <button @click="login()">立即登录</button>
    </p>
  </form>

</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      title:'欢迎登录',
      // username:'admin',
      // password:'123456'
      user:{
        username:'super',
        password:'123456'
      }
    },
    methods: {
      login(){
        // $.get('',{username:this.username,password:this.password},function(res){   this.user =res.data })
        // console.log(this.username,this.password)
        console.log(JSON.stringify(this.user))
      }
    }
  })
</script>
</body>
</html>